<template>
    <div class="content">
        <el-dialog :visible.sync="dialog.dialogFormVisible" title="温馨提示" size="tiny" :before-close="close" :span='22'>
            <el-form label-width="120px" class="app-content" :rules="rules" :model="ruleForm" ref="ruleForm">
                <el-form-item label="科目添加" prop="subject">
                                
                </el-form-item>

                <el-form-item class="footer">
                    <el-button type="primary" @click="submitForm">确认</el-button>
                </el-form-item>
            </el-form>  
        </el-dialog>
    </div>
</template>
<script>
import { subjectDetail, querySubjectByName, addSubject } from 'api/schoolManage';
export default {
    props: {
        dialog: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            dynamicTags: [
                
            ],
            ruleForm: {
                subject: '',
                subjectList: []
            },
            schoolLoadingSub: false,
            rules: {

            }
        }
    },
    // 初始化
    created() {
        this.getSubjectDetail();
    },
    methods: {
        close() {
            this.dialog.dialogFormVisible = false
        },
        // 模糊查询科目
        remoteMethodSub(query) {
            if (query !== '') {
                this.schoolLoadingSub = true;
                setTimeout(() => {
                    this.schoolLoadingSub = false;
                    querySubjectByName(query).then(response => {                       
                        if (response.data.status==200) {
                            this.ruleForm.subjectList = response.data.content;    
                        }
                    });
                }, 200);
            }
        },
        changeSub(a) {
            if (a=='') {
                return;
            }
            let obj = {};
            obj = this.ruleForm.subjectList.find((item) => {
                return item.subjectId == a;
            });
            for (let i = 0;i<this.dynamicTags.length;i++) {
                if (a==this.dynamicTags[i].subjectId) {
                    this.$message({
                        type: 'warning',
                        message: '添加科目重复'
                    });
                    this.ruleForm.subject = ''
                    return;
                }
            }
            let tag = {
                subjectName: obj.subjectName,
                subjectId: a
            }
            this.dynamicTags.push(tag)
        },
        // 标签删除
        handleClose(tag) {
            this.ruleForm.subject = '';
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        // 查询科目详情
        getSubjectDetail() {
            subjectDetail(this.dialog.pid).then(response => {
                if (response.data.status==200) {
                    this.dynamicTags = response.data.content;    
                } else {
                    this.$message({
                        type: 'warning',
                        message: response.data.errorMsg
                    })
                }
            });
        },
        submitForm() {
            if (this.dynamicTags.length < 1) {
                this.$message({
                    type: 'warning',
                    message: '至少添加一个科目！'
                });
            }
            let str = '';
            for (var i = 0;i<this.dynamicTags.length;i++) {
                str+=this.dynamicTags[i].subjectId+',';
            }
            str = str.substring(0, str.length-1);
            addSubject(this.dialog.pid, str).then(response => {
                this.$message({
                    type: 'success',
                    message: response.data.errorMsg
                });
            });
            this.dialog.dialogFormVisible = false;

            // 给父组件传值
            this.$emit('teacherName', this.value)
        },
        resetForm() {
            this.dialog.dialogFormVisible = false;
        }
    }
}
</script>
<style lang="scss" scoped>
.el-form{
    padding-right:30px;
}
.subjectKuang{
    border:1px solid #ECECEC;
    padding:20px 30px 40px 30px;
    width:100%;
}
.footer{
    text-align:right;
}
.el-tag{
    margin-left:5px;
    background:#f9f9f9;
    color:#444;
}
</style>
